<template>
    <!-- 基本信息弹窗 -->
    <el-dialog :model-value="props.userDialogVisible" title="基本信息" width="800px" class="info-dialog"
        @close="$emit('update:userDialogVisible', false)">
        <el-form :model="formData" label-width="130px" label-position="right" :rules="rules">
            <div class="form-columns">
                <!-- 左列 -->
                <div class="form-left">
                    <el-form-item label="姓名：" prop="name">
                        <div class="masked-text" v-if="!isEdit">
                            <span v-if="name">{{ formData.name }}</span>
                            <span v-else>{{ formData.name }}​</span>
                            <!-- <el-icon class="eye-icon" @click="toggleName">
                <View v-if="name" />
                <Hide v-else />
              </el-icon> -->
                        </div>
                        <el-input v-model="formData.name" v-else />
                    </el-form-item>
                    <el-form-item label="手机号：">
                        <span class="form-value" v-if="!isEdit">{{ formData.phone || '-' }}</span>
                        <el-input v-model="formData.phone" v-else />
                    </el-form-item>
                    <el-form-item label="简称：">
                        <span class="form-value">{{ formData.JC }}</span>
                    </el-form-item>
                    <el-form-item label="出生日期：">
                        <span class="form-value" v-if="!isEdit">{{ formData.birthday || '-' }}</span>
                        <el-date-picker v-model="formData.birthday" type="date" placeholder="请选择出生日期"
                            format="YYYY年MM月DD日" value-format="YYYY-MM-DD" style="width: 100%" v-else />
                    </el-form-item>
                    <el-form-item label="病例号：">
                        <span class="form-value">{{ formData.caseNo }}</span>
                    </el-form-item>
                    <el-form-item label="邮箱：">
                        <span class="form-value" v-if="!isEdit">{{ formData.mailbox || '-' }}</span>
                        <el-input v-model="formData.mailbox" v-else />
                    </el-form-item>
                    <el-form-item label="疾病种类：">
                        <span class="form-value">{{ jbzlName || '-' }}</span>
                    </el-form-item>
                    <el-form-item label="住院号：" prop="zyh">
                        <span class="form-value" v-if="!isEdit">{{ formData.zyh || '-' }}</span>
                        <el-input v-model="formData.zyh" v-else />
                    </el-form-item>
                    <el-form-item label="现住地：">
                        <span class="form-value">{{ formData.XZD || '-' }}</span>
                    </el-form-item>
                    <el-form-item label="详细地址：">
                        <span class="form-value">{{ formData.jg || '-' }}</span>
                    </el-form-item>
                    <el-form-item label="现在病史：">
                        <span class="form-value">{{ formData.bsms || '-' }}</span>
                    </el-form-item>
                    <el-form-item label="诊断：">
                        <span class="form-value">{{ formData.ZD || '-' }}</span>
                    </el-form-item>
                </div>

                <!-- 右列 -->
                <div class="form-right">
                    <el-form-item label="姓名缩写：" v-if="isEdit" prop="nameSx">
                        <el-input v-model="formData.nameSx" />
                    </el-form-item>
                    <el-form-item label="手机号是否认证：" v-if="isEdit">
                        <el-radio-group v-model="formData.resource">
                            <el-radio value="1">是</el-radio>
                            <el-radio value="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="性别：">

                        <span class="form-value">{{ sexList.length ? sexList[formData.sex - 1].dictValue : '-' }}</span>
                    </el-form-item>

                    <el-form-item label="电话号：">
                        <span class="form-value">{{ formData.tel || '-' }}</span>
                    </el-form-item>
                    <el-form-item label="民族：">
                        <span class="form-value">{{ formData.MZ || '-' }}</span>
                    </el-form-item>

                    <el-form-item label="年龄：">
                        <span class="form-value">{{ formData.NL || '-' }}</span>
                    </el-form-item>
                </div>
            </div>

            <!-- 底部信息 -->
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button type="success" @click="handleEnroll">入组采集</el-button>
                <el-button type="primary" @click="handleEdit" v-if="getTrialStatus == '1'">{{ !isEdit ? '修改' : '保存'
                }}</el-button>
                <el-button @click="$emit('update:userDialogVisible', false)">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, defineProps, defineEmits, onMounted } from 'vue';
import { getDetail, add, update } from '@/api/clinicalcase/clinicalCase';
import { View, Hide } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios'
const route = useRoute();
const routerQuery = ref({});
routerQuery.value = route.query;
const router = useRouter();
const emit = defineEmits();

const dialogVisible = ref(false);
const name = ref(false);

const formData = ref({});
const isEdit = ref(false);
const rules = {
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    zyh: [{ required: true, message: '请输入住院号', trigger: 'blur' }],
    nameSx: [{ required: true, message: '请输入姓名缩写', trigger: 'blur' }],
};

let getTrialStatus = ref('2');

// defineProps({
//   userDialogVisible: Boolean,
//   clickRow: Object,
// });
const props = defineProps({
    clickRow: {
        type: Object,
        default: {},
    },
    userDialogVisible: {
        type: Boolean,
        default: false,
    },
});
const open = row => {

    formData.value = row;
    isEdit.value = false;
    getTrialStatus.value = row.status;
    initDictionary()
};
const toggleName = () => {
    name.value = !name.value;
};

const handleEnroll = () => {
    router.push({
        path: '/trial/gather',
        query: {
            selectTab: 4,
            trialId: routerQuery.value.trialId,
            groupId: props.clickRow.groupId,
            clinicalCaseId: props.clickRow.id,
            clinicalCaseType: '9', //9代表入组采集 8纳排CRF
        },
    });
};

const handleEdit = () => {
    if (isEdit.value) {
        console.log('设呢么时候进的', formData.value);
        update(formData.value).then(
            () => {
                ElMessage({
                    type: 'success',
                    message: '操作成功!',
                });
                isEdit.value = false;
                emit('update:userDialogVisible', false);
            },
            error => {
                isEdit.value = false;
            }
        );
    } else {
        isEdit.value = true;
    }
};
defineExpose({
    open,
});
const extractChildren = (data) => {
    const result = [];

    function processItem(item, level = 0, parentId = null) {
        // 创建新对象，保留原数据所有属性，并添加层级和父级信息
        const newItem = { ...item, level, parentId };
        result.push(newItem);

        // 如果有子级，递归处理
        if (item.children && item.children.length > 0) {
            item.children.forEach(child => {
                processItem(child, level + 1, item.id);
            });
        }
    }

    // 处理顶层数据
    data.forEach(item => {
        processItem(item);
    });

    return result;
}
let sexList = ref([])
let jbzlName = ref('')

const initDictionary = () => {
    axios.get('/api/blade-system/dict/dictionary?code=sex').then(res => {
        sexList.value = res.data.data

    })
    axios.get('/api/blade-illness/illness/tree').then(res => {

        const flattenHierarchy = extractChildren(res.data.data)
       
        
        jbzlName.value = flattenHierarchy.find(v => v.value == formData.value.jbzl)?.title



    })

};
onMounted(() => {

});
</script>

<style scoped>
.masked-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

.eye-icon {
    cursor: pointer;
    color: #409eff;
}

.form-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-value {
    color: #606266;
}

.dialog-footer .el-button {
    margin-left: 10px;
}

:deep(.el-dialog__header) {
    border-bottom: 1px solid #ebeef5;
}

:deep(.el-form-item__label) {
    color: #909399;
    font-weight: normal;
}
</style>
